

import React, { Component } from 'react';
import { PropTypes } from 'prop-types';

// 1. 安装引入 
import Swiper from 'swiper'

class Myswipe extends Component {
    render() {
        const {id,children } = this.props;  
        return (
            // 2. 满足静态结构 
            <div className='swiper-container' id={id} >
                <div className='swiper-wrapper'>
                    {children} 
                </div>
            </div>
        );
    }

    componentDidMount(){
        console.log("children")
        const {id,options  } = this.props;
        // 3. 插件实例化 
        const mySwiper = new Swiper('#'+id, {
            ...options,
            observer:true 
        } )
    }
}
Myswipe.defaultProps   = {
    id:'thisSwiper',
    options:{

    }
}

Myswipe.propTypes  = {
    id:PropTypes.string ,
    options:PropTypes.object 
}

Myswipe.Item = ({ children })=>{
    return (
        <div className="swiper-slide" >
              {children}
        </div>
    )
}

export default Myswipe;
